<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title id="title">美爵</title>
    <link rel="stylesheet" href="../css/index.css"/>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../jquery/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../js/hoteljs/hoteljs.js"></script>
    <link rel="stylesheet" href="../tool/css/calendar.css">
</head>
<style type="text/css">

    .Date_lr {
        width: 50%;
        text-align: center;
    }

    .span21 {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        font-size: 14px;
        color: #666;
        border: 1px solid #e5e5e5;
        padding: 2px 8px;
        line-height: 20px;
        border-radius: .2rem;
        background-color: #fff;
    }

    #checkinout {
        height: 50px;
        line-height: 50px;
        position: relative;
        margin: 10px;
        padding: 2px 0;
        display: -webkit-box;
        display: flex;
        border: 1px solid #e5e5e5;
        border-radius: .02rem;
        background-color: #fff;
    }

    #firstSelect p {
        line-height: 25px;
        color: #999;
        font-size: 12px;
    }

    #startDate {
        border: 0;
        position: absolute;
        left: 0;
        margin: 0 auto;
        width: 50%;
        font-size: 16px;
        color: #05c0ad;
        text-align: center;
    }

    #endDate {
        border: 0;
        position: absolute;
        right: 0;
        margin: auto 0;
        width: 50%;
        font-size: 16px;
        color: #05c0ad;
        text-align: center;
    }

    .mask_calendar {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.4);
        display: none;
        z-index: 9999;
    }

    .calendar {
        height: 400px;
        position: fixed;
        bottom: 0;
        left: 0;
    }

    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }

    @keyframes slideInDown {
        from {
            transform: translate3d(0, -100%, 0);
            visibility: visible;
        }

        to {
            transform: translate3d(0, 0, 0);
        }
    }

    .slideInDown {
        animation-name: slideInDown;
    }
</style>
<body>
<div class="head" style="background-image: url(../img/bg_header_index_top.png); height: 50px;">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">此处是logo</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav" style="margin-right: 2px">
                <li><a href="index.html">首页</a></li>
                <li><a href="allhotel.html">国内酒店</a></li>
                <li><a href="#">国外酒店</a></li>
                <li><a href="#">特卖专区</a></li>
                <li class="active"><a href="#">旗下品牌</a></li>
                <li><a href="#">华住会</a></li>
                <li><a href="#">华住商旅</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li style="margin-right: 30px;margin-top: 10px">
                    <button type="button" class="btn btn-primary small " style=";height: 30px;width:70px" onclick="loginSys()">登录</button>
                </li>
                <li style="margin-right: 30px;margin-top: 10px">
                    <button type="button" class="btn btn-default small active" style=";height: 30px;width:70px">注册
                    </button>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</div>
<script>
    $.ajax({
        url:'http://localhost:8888/getuser',
        success:function(res){
            if(res.length>0){
                console.log(res[0].userName)
                $(".navbar-nav").eq(1).html("<li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <div style=\";height: 30px;width:70px;font-size: 14px;cursor: pointer\" title='点击进入个人中心' onclick='personcenter()'>"+res[0].userName+"</div>\n" +
                    "                </li>\n")
            }
            else {
                $(".navbar-nav").eq(1).html(" <li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <button type=\"button\" class=\"btn btn-primary small \" style=\";height: 30px;width:70px\" onclick=\"loginSys()\">登录</button>\n" +
                    "                </li>\n" +
                    "                <li style=\"margin-right: 30px;margin-top: 10px\">\n" +
                    "                    <button type=\"button\" class=\"btn btn-default small active\" style=\";height: 30px;width:70px\">注册\n" +
                    "                    </button>\n" +
                    "                </li>")
            }
        }
    })
    function personcenter() {

        $.ajax({
            url:"http://localhost:8888/recentHtmlPage",
            data:"htmlPage="+window.location.href,
            success:function (data) {
            }
        })
        window.location.href="http://localhost:8080/user/getuserinfo"
    }

    function loginSys() {
        // alert(1)
        $.ajax({
            url:"http://localhost:8888/recentHtmlPage",
            data:"htmlPage="+window.location.href,
            success:function (data) {
            }
        })
        window.location.href="http://localhost:8080/login"
    }
</script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid" style="margin-bottom: 0px;opacity: 0.9;background-color: black">
        <div>
            <ul class="nav navbar-nav">
                <li class="checked"><a href="#">美爵</a></li>
                <li><a href="#">禧玥</a></li>
                <li><a href="#">漫心</a></li>
                <li><a href="#">诺富特</a></li>
                <li><a href="#">美居</a></li>
                <li><a href="#">CitiGO</a></li>
                <li><a href="#">桔子</a></li>
                <li><a href="#">星辰</a></li>
                <li><a href="#">全季</a></li>
                <li><a href="#">宜必思尚品</a></li>
                <li><a href="#">宜必思</a></li>
                <li><a href="#">汉庭</a></li>
                <li><a href="#">怡莱</a></li>
                <li><a href="#">海友</a></li>
                <li><a href="#">花间堂</a></li>
                <li><a href="#">美伦</a></li>
                <li><a href="#">桔子水晶</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="bg_img">
    <img src="../img/search_bg_img.jpg" alt="" style="width: 100%" id="search_bg_img"/>
    <div class="search">
        <div id="checkinout" style="opacity:0.70;">
            <div id="firstSelect" style="width:100%;">
                <div class="Date_lr" style="float:left;">
                    <p>入住</p>
                    <input id="startDate" type="text" value="" style="" readonly>
                </div>
                <div class="Date_lr" style="float:right;">
                    <p>离店</p>
                    <input id="endDate" type="text" value="" style="" readonly>
                </div>
                <span class="span21">共<span class="NumDate">1</span>晚</span>
            </div>
        </div>
        <div style="background-color:white;margin-top:100px;width: 15%;height: 70px;line-height: 70px;font-size: 20px;text-align: center;color: #05c0ad;opacity: 0.90;margin-left: 43%;cursor: pointer"id="search">搜&nbsp;索</div>
        <div class="mask_calendar">
            <div class="calendar"></div>
        </div>
    </div>
</div>
<script>
    $("#search").hide()
    $("#search").click(function () {
        var startDate = $('#startDate').val();  //入住的天数
        var endDate = $('#endDate').val();      //离店的天数
        var NumDate = $('.NumDate').text();    //共多少晚
        var hotelName= jQuery.trim(brandname);
        var searchUrl =encodeURI("allhotel.html?hotelName="+hotelName +"&startdate=" + startDate + "&enddate=" + endDate );   //使用encodeURI编码
        window.location.href =searchUrl;
        })
</script>
<div class="hotel_doucment_outer" style="margin-left: 7%">
    <div class="hotel_doucment_logo"><img src="../img/brand_mei_desc_logo.png" alt="" id="logo"/></div>
    <h2 class="hotel_header_content">
        <span id="brandname">
            Grand Mercure Hotels
        </span>
    </h2>

    <div style="width: 400.59px;height:168px">
        <h2 class="hotel_content" style="margin-left: 50px" id="introduce">美爵是雅高酒店集团旗下的高端酒店和公寓品牌。美爵酒店在亚太区已有近20年的历史，
            每家酒店都围绕“融合、发现、感悟”的理念，通过将具有当地特色的设计、个性和风格与高端酒店服务相结合，
            成为酒店宾客与当地文化的联系纽带。雅高正在将美爵打造成能够适应不同市场的酒店品牌，比如在中国推出的美爵、
            印尼的Maha Cipta，随后美爵还将继续向印度和拉丁美洲拓展。
        </h2>
    </div>
</div>
<div id="myCarousel" class="carousel slide" style="width:660px;float: left;margin-top: -10px;height:347.81px;
">
    <!-- 轮播（Carousel）指标 -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播（Carousel）项目 -->
    <div class="carousel-inner">
        <div class="item active" style="overflow:hidden">
            <img src="http://localhost:8888/img/brand_mei_1.png" alt="First slide" class="mycorse_img" id="imgage1">
        </div>
        <div class="item">
            <img src="../img/brand_mei_2.jpg" alt="Second slimycorse_imgde" class="mycorse_img" id="imgage2">
        </div>
        <div class="item">
            <img src="../img/brand_mei_3.jpg" alt="Third slide" class="mycorse_img" id="imgage3">
        </div>
        <div class="item">
            <img src="../img/brand_mei_3.jpg" alt="Third slide" class="mycorse_img" id="imgage4">
        </div>
    </div>
    <!-- 轮播（Carousel）导航 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
<script>
    $('#myCarousel').carousel({
        interval: 3000
    })
</script>
<div  class="add"style="margin-left: 3%;">
    <div style="margin-bottom: 40px"><p style="font-size: xx-large;text-align:center;">推荐酒店</p></div>
    <div id="showimg1" style="width: 325px;height: 200px;margin-left: 30px;float: left;margin-right: 82px;position: relative;">
        <img src="../img/mei_hotel_2.jpg" alt="" class="img" id="imgage5"/>
        <div class="hotel_name_div" style="text-align: center" id="div1"><span class="hotel_name" id="hotelname1" onclick="getHotelInfoByhotelName(this)">上海证大美爵酒店</span></div>
    </div>
    <div id="showimg2" style="width: 325px;height: 200px;float: left;margin-right: 82px">
        <img src="../img/mei_hotel_3.jpg" alt="" class="img" id="imgage6"/>
        <div class="hotel_name_div" style="width: 10%;text-align: center" id="div2"><span class="hotel_name" id="hotelname2" onclick="getHotelInfoByhotelName(this)">北京东方美爵酒店</span></div>
    </div>
    <div id="showimg3" style="width: 325px;height: 200px;float: left;">
        <img src="../img/mei_zhengda_small.jpg" alt="" class="img" id="imgage7"/>
        <div class="hotel_name_div"  style="width: 12%;text-align: center" id="div3"><span class="hotel_name" id="hotelname3" onclick="getHotelInfoByhotelName(this)">深圳东方银座美爵酒店</span></div>
    </div>
    <div class="recomander_img" style="margin-left: 30px" id="showimgcontent1">
        <div style="margin-top: 12px;margin-left: 30px;margin-right: 20px;color: #8D8D8D">
            <span id="content1">
                上海证大美爵酒店位于充满活力的上海浦东，地理位置优越，交通便捷，
                是距离上海新国际博览中心最近的酒店。上海证大美爵酒店以精致简约的现代派风格诠释时尚与优雅的新定义。
                从对色彩使用的大胆把握，到悉心选配的各种内部装饰均令人赏心悦目。
            </span>
        </div>
    </div>

    <div class="recomander_img" id="showimg1content2">
        <div style="margin-top: 12px;margin-left: 30px;margin-right: 20px;color: #8D8D8D">
            <span id="content2">
                北京东城雅高美爵酒店坐落在北京中心，地处紫禁城以北，
                步行仅 15 分钟即刻到达东直门机场快线车站和众多著名旅游景点
            </span>
        </div>
    </div>
    <div class="recomander_img" id="showimg1content3">
        <div style="margin-top: 12px;margin-left: 30px;margin-right: 20px;color: #8D8D8D">
            <span id="content3">
                深圳东方银座美爵酒店位于福田商业区，毗邻竹子林地铁站。
                酒店拥有湾景及山景客房、五家餐厅、五家酒吧和室内温水泳池
            </span>
        </div>
    </div>
</div>
</body>
</html>
<script src="../js/indexjs/js.js"></script>
<script>
    var brandname = '美爵';
    $("ul li a").click(function () {
        $("ul>li").each(function (index) {
            $(this).attr("class","")
        })
         brandname = $(this).html();
        $(this).parent().attr("class","checked");
        $("title").text(brandname)
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            //响应状态码200 表示跟服务器交互成功
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                // var obj = JSON.parse(xmlhttp.responseText);
                var json = eval('(' + xmlhttp.responseText + ')');//拿到服务器响应的json数据
                console.log(json)
                $("#brandname").html(json[0].brandEnglishName);
                $("#search_bg_img").attr("src",json[0].searchBgImg);
                $("#logo").attr("src",json[0].logoUrl);
                if(brandname == 'CitiGO'){
                    var length = json[1][0].hotelName.length
                    $("#div1").css("width", 5*length - 13 + "%");
                    var length = json[1][1].hotelName.length
                    $("#div2").css("width", 5*length/4 - 4+ "%");
                    var length = json[1][2].hotelName.length;
                    $("#div3").css("width", 5*length/4 - 4+ "%");                }
                else{
                    var length = json[1][0].hotelName.length
                    $("#div1").css("width", 5*length + "%");
                    var length = json[1][1].hotelName.length
                    $("#div2").css("width", 5*length/4 + "%");
                    var length = json[1][2].hotelName.length;
                    $("#div3").css("width", 5*length/4 + "%");
                }
                function bg1(){
                    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
                }
                var title = bg1();
                $("#div1").css("background-color",title)
                $("#div2").css("background-color",title)
                $("#div3").css("background-color",title)
                $("#startDate").css("color",title)
                $("#endDate").css("color",title)


                $("#brandname").css("color",title)

                $("#showimg1").hover(function(){
                    $("#showimgcontent1").css("border-color",title)
                },function(){
                    $("#showimgcontent1").css("border-color","#eeeae9")
                });
                $("#showimg2").hover(function(){
                    $("#showimg1content2").css("border-color",title)
                },function(){
                    $("#showimg1content2").css("border-color","#eeeae9")
                });
                $("#showimg3").hover(function(){
                    $("#showimg1content3").css("border-color",title)
                },function(){
                    $("#showimg1content3").css("border-color","#eeeae9")
                });

                $("#hotelname1").html(json[1][0].hotelName);
                $("#hotelname2").html(json[1][1].hotelName);
                $("#hotelname3").html(json[1][2].hotelName);
                $("#imgage1").attr("src",json[0].brandImgOne);
                $("#imgage2").attr("src",json[0].brandImgTwo);
                $("#imgage3").attr("src",json[0].brandImgThree);
                $("#imgage4").attr("src",json[0].brandImgFour);
                $("#imgage5").attr("src",json[1][0].hotelImgUrl);
                $("#imgage6").attr("src",json[1][1].hotelImgUrl);
                $("#imgage7").attr("src",json[1][2].hotelImgUrl);
                $("#introduce").html(json[0].brandFeature);
                if(json[1][0].hotelContent.length < 120){
                    $("#content1").html(json[1][0].hotelContent);
                }else {
                    var hotelContent = json[1][0].hotelContent.substring(0,115) +"...";
                    $("#content1").html(hotelContent);

                }

                if(json[1][1].hotelContent.length < 120){
                    $("#content2").html(json[1][1].hotelContent);
                }else {
                    var hotelContent = json[1][1].hotelContent.substring(0,115) +"...";
                    $("#content2").html(hotelContent);
                }



                if(json[1][2].hotelContent.length < 120){
                    $("#content3").html(json[1][2].hotelContent);
                }else {
                    var hotelContent = json[1][2].hotelContent.substring(0,115) +"...";
                    $("#content3").html(hotelContent);
                }
            }
        }
        //以get方式打开网络连接，true表示异步
        xmlhttp.open("GET", "http://localhost:8888/index?brandName="+brandname, true);
        xmlhttp.send();// 发送请求到服务器
    });
    function getHotelInfoByhotelName(obj) {
        //点击搜索
            var hotelName= jQuery.trim($(obj).text());
            var startDate = $('#startDate').val();  //入住的天数
            var endDate = $('#endDate').val();      //离店的天数
            var NumDate = $('.NumDate').text();    //共多少晚
            var searchUrl =encodeURI("hotel.html?hotelName="+hotelName+"&startdate=" + startDate + "&endDate=" + endDate + "&numDate=" + NumDate);   //使用encodeURI编码
            window.location.href =searchUrl;
    }
</script>

<!--<script type="text/javascript" src="js/date.js"></script>-->
<script>
    $(function () {
        $('#firstSelect').on('click', function () {
            $('.mask_calendar').show();
        });
        $('.mask_calendar').on('click', function (e) {
            if (e.target.className == "mask_calendar") {
                $('.calendar').slideUp(200);
                $('.mask_calendar').fadeOut(200);
            }
        })
        $('#firstSelect').calendarSwitch({
            selectors: {
                sections: ".calendar"
            },
            index: 4,      //展示的月份个数
            animateFunction: "slideToggle",        //动画效果
            controlDay: true,//知否控制在daysnumber天之内，这个数值的设置前提是总显示天数大于90天
            daysnumber: "90",     //控制天数
            comeColor: "#2EB6A8",       //入住颜色
            outColor: "#2EB6A8",      //离店颜色
            comeoutColor: "#E0F4F2",        //入住和离店之间的颜色
            callback: function () {//回调函数
                $('.mask_calendar').fadeOut(200);
                var startDate = $('#startDate').val();  //入住的天数
                var endDate = $('#endDate').val();      //离店的天数
                var NumDate = $('.NumDate').text();    //共多少晚
                console.log(startDate);
                console.log(endDate);
                console.log(NumDate);
                //下面做ajax请求
                //show_loading();
                /*$.post("demo.php",{startDate:startDate, endDate:endDate, NumDate:NumDate},function(data){
                    if(data.result==1){
                        //成功
                    } else {
                        //失败
                    }
                });*/
            },
            comfireBtn: '.comfire'//确定按钮的class或者id
        });
        var b = new Date();
        var ye = b.getFullYear();
        var mo = b.getMonth() + 1;
        mo = mo < 10 ? "0" + mo : mo;
        var da = b.getDate();
        da = da < 10 ? "0" + da : da;
        $('#startDate').val(ye + '-' + mo + '-' + da);
        b = new Date(b.getTime() + 24 * 3600 * 1000);
        var ye = b.getFullYear();
        var mo = b.getMonth() + 1;
        mo = mo < 10 ? "0" + mo : mo;
        var da = b.getDate();
        da = da < 10 ? "0" + da : da;
        $('#endDate').val(ye + '-' + mo + '-' + da);
    });
</script>
<script src="../tool/js/date.js"></script>
<!--//控制页面主题的的js代码-->
<script>

</script>


